<template>
  <div class="left_top">
    <div class="left">
      <p class="num">{{login_cnt}}</p>
      <button class="btn">求职者登陆</button>
    </div>
    <div class="right">
      <p class="num">{{reg_cnt}}</p>
      <button class="btn">求职者注册</button>
    </div>
  </div>
</template>

<script>
import {getUserRegLog} from "../api";

export default {
  name: 'LeftTop',
  data () {
    return {
      reg_cnt: '',
      login_cnt: ''
    }
  },
  methods: {
    init () {
      setInterval(() => {
        getUserRegLog().then(res => {
          const data = res.data.data
          this.reg_cnt = data.reg_cnt
          this.login_cnt = data.login_cnt
        })
      }, 2000)
    }

  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/var_";

.left_top {
  display: flex;
  box-sizing: border-box;
  height: 100%;

  .left {
    margin-right: $fontSize_10;
  }

  .left, .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #3ba4f2;
    padding: $fontSize_10 0;

    .num {
      font-size: $fontSize_30;
      text-align: center;
      color: #ffffff;
    }

    .btn {
      width: $width_115;
      height: $fontSize_16;
      line-height: $fontSize_16;
      font-size: $fontSize_12;
      color: #ffffff;
      border: none;
      outline: none;
      background: #3ba4f2;
      background-image: linear-gradient(45deg, #1d77dd, #46b6f7);
    }
  }

}

</style>
